﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dbPoll_Application.ViewModels.ReportViewModel>" %>

<asp:Content ID="Content2" ContentPlaceHolderID="TitleContent" runat="server">
	Reports
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    
    <div class="pageHeadingContainer"><h2 class="pageHeading">Reports</h2></div>
    <div id="contentContainer">

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', { 'packages': ['corechart'] });
    google.setOnLoadCallback(drawChart);

    // Build the array of data
    var dataArray = [];
    dataArray[0] = ['Answer', 'Responses'];

    <% 
        int responseCount = 0;
        int i = 1;
        foreach (var response in Model.responses) 
        { 
            
            responseCount += response.Value;
            
            %>
                
            dataArray[<%=i%>] = ['<%=response.Key%>', <%=response.Value%>];
                
            <%
    
        i++;
        
        }    
       
    %>

    function drawChart() {
        var data = google.visualization.arrayToDataTable(dataArray);
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.<%=Model.chartType%>(document.getElementById('chart_div'));
        
        if ('<%=Model.valueType%>' == "Count")
        {

            chart.draw(data, {width: 600, height: 400, title: '<%=Model.text%>', 
                                titleTextStyle: {fontSize: 20},
                                colors: ['<%=Model.chartColours %>'],
                                hAxis: {title: dataArray[0][0] }, vAxis: {title: dataArray[0][1] } });
        }
        else
        {
            chart.draw(data, { width: 600, height: 400, title: '<%=Model.text%>', 
                                titleTextStyle: {fontSize: 20},
                                colors: ['<%=Model.chartColours %>'],
                                hAxis: {title: dataArray[0][0] }, vAxis: {title: dataArray[0][1], format:'#%'} });
        }
        
    }

    </script>

    <!--Div to hold the chart-->
    <div id="chart_div" align="center"></div>
    </div>
</asp:Content>
